<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>vue实例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="app">
    <p>{{ a }}</p>
    <!--这里的`foo`不会更新-->
    <button v-on:click="foo = 'baz'">Change it</button>
</div>
<div id="example">
    {{a}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 我们的数据对象
    var data = {a: 1}

    // //该对象被加入到一个Vue实例中
    // var vm = new Vue({
    //     data: data
    // })
    // console.log("vm.a == data.a : ", vm.a == data.a);
    // //设置属性也会影响到原始数据
    // vm.a = 2;
    // console.log(data.a)
    //
    // //反之亦然
    // data.a = 3;
    // console.log(vm.a)
    //
    // var obj = {
    //     foo: 'bar'
    // }
    // // Object.freeze(obj)
    //
    // new Vue({
    //     el: '#app',
    //     data: obj
    // })

    var vm = new Vue({
        el:'#example',
        data:data,
        mounted:function () {
            console.log('el由#example变成',this.$el);
        }
    })
    vm.$el='#app';
    console.log('vm.$data === data:',vm.$data === data);
    console.log('vm.$el === document.getElementById(\'example\'):',vm.$el === document.getElementById('example'));
    vm.$watch('a',function (newValue, oldValue) {
        //这个回调将在'vm.a'改变后调用
    })

    new Vue({
        data: {
            a: 1
        },
        created:function () {
            //'this'指向Vue实例
            console.log('a is: ' + this.a)
        }
    })
</script>
</html>